JavaScript Module Federation์ ์ง์ฐ ํ๊ฐ ๊ธฐ๋ฅ์ ์ดํด๋ณด๊ณ , ์น ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ ์ต์ ํ ๋ฐ ์ฌ์ฉ์ ๊ฒฝํ ํฅ์์ ์ํด ์จ๋๋งจ๋ ๋ชจ๋ ๋ก๋ฉ์ ํ์ฑํํ์ธ์.
JavaScript Module Federation ์ง์ฐ ํ๊ฐ: ์จ๋๋งจ๋ ๋ชจ๋ ๋ก๋ฉ
๋์์์ด ์งํํ๋ ์น ๊ฐ๋ฐ ํ๊ฒฝ์์ ์ฑ๋ฅ ์ต์ ํ์ ์ฌ์ฉ์ ๊ฒฝํ ํฅ์์ ๋งค์ฐ ์ค์ํฉ๋๋ค. Webpack 5์ ๋์ ๋ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ธ JavaScript Module Federation์ ๋ ๋ฆฝ์ ์ผ๋ก ๋ฐฐํฌ ๊ฐ๋ฅํ ๋ชจ๋๋ก ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ฅผ ๊ตฌ์ถํ๊ณ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ฑํ๋ ํ์ ์ ์ธ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํฉ๋๋ค. Module Federation์ ํต์ฌ ๊ตฌ์ฑ ์์๋ ์ง์ฐ ํ๊ฐ(์จ๋๋งจ๋ ๋ชจ๋ ๋ก๋ฉ์ด๋ผ๊ณ ๋ ํจ)๋ฅผ ์ํํ๋ ๊ธฐ๋ฅ์ ๋๋ค. ์ด ๊ธฐ์ฌ์์๋ Module Federation ๋ด ์ง์ฐ ํ๊ฐ๋ฅผ ์ฌ์ธต์ ์ผ๋ก ๋ค๋ฃจ๋ฉฐ, ์ด์ , ๊ตฌํ ์ ๋ต ๋ฐ ์ค์ ์ ์ฉ ์ฌ๋ก๋ฅผ ์ดํด๋ด ๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ ํฅ์, ์ด๊ธฐ ๋ก๋ฉ ์๊ฐ ๋จ์ถ, ๋ชจ๋์์ผ๋ก ์ ์ง ๊ด๋ฆฌ ๊ฐ๋ฅํ ์ฝ๋๋ฒ ์ด์ค๋ก ์ด์ด์ง๋๋ค.
JavaScript Module Federation ์ดํด
Module Federation์ ์ฌ์ฉํ๋ฉด JavaScript ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ฐํ์์ ๋ค๋ฅธ ๋ ๋ฆฝ์ ์ผ๋ก ๋ฐฐํฌ๋ ์ ํ๋ฆฌ์ผ์ด์ (์๊ฒฉ ์ ํ๋ฆฌ์ผ์ด์ )์์ ์ฝ๋๋ฅผ ๋ก๋ํ ์ ์์ต๋๋ค. ์ด ์ํคํ ์ฒ๋ฅผ ํตํด ํ์ ๊ธด๋ฐํ๊ฒ ๊ฒฐํฉ๋์ง ์๊ณ ๋ ํฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ์๋ก ๋ค๋ฅธ ๋ถ๋ถ์์ ์์ ํ ์ ์์ต๋๋ค. ์ฃผ์ ๊ธฐ๋ฅ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- ๋ถ๋ฆฌ: ๋ชจ๋์ ๋ ๋ฆฝ์ ์ธ ๊ฐ๋ฐ, ๋ฐฐํฌ ๋ฐ ๋ฒ์ ๊ด๋ฆฌ๋ฅผ ํ์ฉํฉ๋๋ค.
- ๋ฐํ์ ๊ตฌ์ฑ: ๋ฐํ์์ ๋ชจ๋์ ๋ก๋ํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ํคํ ์ฒ์ ์ ์ฐ์ฑ์ ์ ๊ณตํฉ๋๋ค.
- ์ฝ๋ ๊ณต์ : ์ฌ๋ฌ ๋ชจ๋ ๊ฐ์ ๊ณตํต ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฐ ์ข ์์ฑ์ ๊ณต์ ํ ์ ์๋๋ก ํฉ๋๋ค.
- ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋ ์ง์: ํ์ด ๋ ๋ฆฝ์ ์ผ๋ก ๊ตฌ์ฑ ์์๋ฅผ ๊ฐ๋ฐํ๊ณ ๋ฐฐํฌํ ์ ์๋ ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ฅผ ์์ฑํ ์ ์๋๋ก ํฉ๋๋ค.
Module Federation์ ์ฌ๋ฌ ๊ฐ์ง ์ฃผ์ ์ธก๋ฉด์์ ๊ธฐ์กด ์ฝ๋ ๋ถํ ๋ฐ ๋์ ๊ฐ์ ธ์ค๊ธฐ์ ๋ค๋ฆ ๋๋ค. ์ฝ๋ ๋ถํ ์ ๋จ์ผ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ ์์ ์ฒญํฌ๋ก ๋๋๋ ๋ฐ ์ค์ ์ ๋๋ ๋ฐ๋ฉด, Module Federation์ ์๋ก ๋ค๋ฅธ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ฝ๋์ ๋ฆฌ์์ค๋ฅผ ์ํํ๊ฒ ๊ณต์ ํ ์ ์๋๋ก ํฉ๋๋ค. ๋์ ๊ฐ์ ธ์ค๊ธฐ๋ ๋น๋๊ธฐ์ ์ผ๋ก ์ฝ๋๋ฅผ ๋ก๋ํ๋ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํ๋ ๋ฐ๋ฉด, Module Federation์ ์ ์ด๋๊ณ ํจ์จ์ ์ธ ๋ฐฉ์์ผ๋ก ์๊ฒฉ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ฝ๋๋ฅผ ๋ก๋ํ๋ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค. Module Federation ์ฌ์ฉ์ ์ด์ ์ ํฌ๊ณ ๋ณต์กํ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ํนํ ์ค์ํ๋ฉฐ, ์ ์ธ๊ณ์ ์กฐ์ง์์ ์ ์ ๋ ๋ง์ด ์ฑํํ๊ณ ์์ต๋๋ค.
์ง์ฐ ํ๊ฐ์ ์ค์์ฑ
Module Federation์ ์ปจํ ์คํธ์์ ์ง์ฐ ํ๊ฐ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ด๊ธฐํ๋ ๋ ์๊ฒฉ ๋ชจ๋์ด ์ฆ์ ๋ก๋๋์ง ์์์ ์๋ฏธํฉ๋๋ค. ๋์ ์ค์ ๋ก ํ์ํ ๋๋ง ์จ๋๋งจ๋๋ก ๋ก๋๋ฉ๋๋ค. ์ด๋ ๋ชจ๋ ๋ชจ๋์ด ๋ฏธ๋ฆฌ ๋ก๋๋๋ ์ฆ์ ๋ก๋ฉ๊ณผ ๋์กฐ๋๋ฉฐ, ์ด๋ ์ด๊ธฐ ๋ก๋ฉ ์๊ฐ๊ณผ ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ์ง์ฐ ํ๊ฐ์ ์ด์ ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- ์ด๊ธฐ ๋ก๋ฉ ์๊ฐ ๊ฐ์: ์ค์ํ์ง ์์ ๋ชจ๋ ๋ก๋ฉ์ ์ฐ๊ธฐํ๋ฉด ์ฃผ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ด๊ธฐ ๋ก๋ฉ ์๊ฐ์ด ํฌ๊ฒ ์ค์ด๋ญ๋๋ค. ์ด๋ ์๊ฐ-์ํธ ์์ฉ ์๊ฐ(TTI)์ด ๋ ๋น ๋ฅด๊ณ ์ฌ์ฉ์ ๊ฒฝํ์ด ํฅ์๋ฉ๋๋ค. ์ด๋ ์ธํฐ๋ท ์ฐ๊ฒฐ์ด ๋๋ฆฌ๊ฑฐ๋ ์ฑ๋ฅ์ด ๋ฎ์ ์ฅ์น๋ฅผ ์ฌ์ฉํ๋ ์ฌ์ฉ์์๊ฒ ํนํ ์ค์ํฉ๋๋ค.
- ์ฑ๋ฅ ํฅ์: ํ์ํ ๋๋ง ๋ชจ๋์ ๋ก๋ํ๋ฉด ํด๋ผ์ด์ธํธ ์ธก์์ ๊ตฌ๋ฌธ ๋ถ์ํ๊ณ ์คํํด์ผ ํ๋ JavaScript์ ์์ ์ต์ํํ์ฌ ํนํ ๋ ํฐ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ฑ๋ฅ์ด ํฅ์๋ฉ๋๋ค.
- ์ต์ ํ๋ ๋ฆฌ์์ค ์ฌ์ฉ: ์ง์ฐ ๋ก๋ฉ์ ํ์ํ ๋ฆฌ์์ค๋ง ๋ค์ด๋ก๋ํ์ฌ ๋์ญํญ ์๋น๋ฅผ ์ค์ด๊ณ ์ ์ฌ์ ์ผ๋ก ํธ์คํ ๋น์ฉ์ ์ ๊ฐํฉ๋๋ค.
- ํ์ฅ์ฑ ํฅ์: ๋ชจ๋์ ์ํคํ ์ฒ๋ฅผ ํตํด ๊ฐ ๋ชจ๋์ด ๋ฆฌ์์ค ์๊ตฌ ์ฌํญ์ ๋ฐ๋ผ ๋ ๋ฆฝ์ ์ผ๋ก ํ์ฅ๋ ์ ์์ผ๋ฏ๋ก ๋ง์ดํฌ๋ก ํ๋ก ํธ์๋๋ฅผ ๋ ๋ฆฝ์ ์ผ๋ก ํ์ฅํ ์ ์์ต๋๋ค.
- ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ: ๋ ๋น ๋ฅธ ๋ก๋ฉ ์๊ฐ๊ณผ ๋ฐ์ํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋์ฑ ๋งค๋ ฅ์ ์ด๊ณ ๋ง์กฑ์ค๋ฌ์ด ์ฌ์ฉ์ ๊ฒฝํ์ ๊ธฐ์ฌํ์ฌ ์ฌ์ฉ์ ๋ง์กฑ๋๋ฅผ ํฅ์์ํต๋๋ค.
Module Federation์์ ์ง์ฐ ํ๊ฐ์ ์๋ ๋ฐฉ์
Module Federation์ ์ง์ฐ ํ๊ฐ๋ ์ผ๋ฐ์ ์ผ๋ก ๋ค์์ ์กฐํฉ์ ์ฌ์ฉํ์ฌ ์ํ๋ฉ๋๋ค.
- ๋์ ๊ฐ์ ธ์ค๊ธฐ: Module Federation์ ๋์ ๊ฐ์ ธ์ค๊ธฐ(
import())๋ฅผ ํ์ฉํ์ฌ ์๊ฒฉ ๋ชจ๋์ ์จ๋๋งจ๋๋ก ๋ก๋ํฉ๋๋ค. ์ด๋ฅผ ํตํด ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ช ์์ ์ผ๋ก ์์ฒญ๋ ๋๊น์ง ๋ชจ๋ ๋ก๋ฉ์ ์ฐ๊ธฐํ ์ ์์ต๋๋ค. - Webpack ๊ตฌ์ฑ: ๋ชจ๋ ๋ฒ๋ค๋ฌ์ธ Webpack์ ์ฐํฉ์ ๊ด๋ฆฌํ๊ณ ์ง์ฐ ๋ก๋ฉ ํ๋ก์ธ์ค๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐ ์ค์ํ ์ญํ ์ ํฉ๋๋ค. `ModuleFederationPlugin`์ ์๊ฒฉ ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ํด๋น ๋ชจ๋์ ๋ฌผ๋ก ๋ ธ์ถ ๋ฐ ์๋น๋๋ ๋ชจ๋์ ์ ์ํ๋๋ก ๊ตฌ์ฑ๋ฉ๋๋ค.
- ๋ฐํ์ ๋ก๋ฉ: ๋ฐํ์์ ๋์ ๊ฐ์ ธ์ค๊ธฐ๋ฅผ ํตํด ๋ชจ๋์ด ์์ฒญ๋๋ฉด Webpack์ ์๊ฒฉ ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ชจ๋์ ๋ก๋ํ์ฌ ํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ก๋ํฉ๋๋ค. ์ฌ๊ธฐ์๋ ํ์ํ ์ข ์์ฑ ํ์ธ ๋ฐ ์ฝ๋ ์คํ์ด ํฌํจ๋ฉ๋๋ค.
๋ค์ ์ฝ๋๋ ๋จ์ํ๋ ๊ตฌ์ฑ์ ๋ณด์ฌ์ค๋๋ค.
// Host Application's webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
// ... other webpack configurations
plugins: [
new ModuleFederationPlugin({
name: 'hostApp',
remotes: {
remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js',
},
shared: {
// Define shared dependencies, e.g., React, ReactDOM
react: { singleton: true, requiredVersion: '^18.0.0' },
'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
},
}),
],
};
์ด ์์์ 'hostApp'์ 'remoteApp'์ด๋ผ๋ ์๊ฒฉ ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ชจ๋์ ์๋นํ๋๋ก ๊ตฌ์ฑ๋ฉ๋๋ค. `remotes` ๊ตฌ์ฑ์ ๋ชจ๋ ๋งค๋ํ์คํธ๊ฐ ํฌํจ๋ ์๊ฒฉ ์ ํ๋ฆฌ์ผ์ด์ ์ `remoteEntry.js` ํ์ผ์ ์์น๋ฅผ ์ง์ ํฉ๋๋ค. `shared` ์ต์ ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฒด์์ ์ฌ์ฉ๋ ๊ณต์ ์ข ์์ฑ์ ์ง์ ํฉ๋๋ค. ๋์ ๊ฐ์ ธ์ค๊ธฐ๋ฅผ Module Federation๊ณผ ํจ๊ป ์ฌ์ฉํ๋ฉด ์ง์ฐ ๋ก๋ฉ์ด ๊ธฐ๋ณธ์ ์ผ๋ก ํ์ฑํ๋ฉ๋๋ค. `import('remoteApp/MyComponent')`๋ฅผ ์ฌ์ฉํ์ฌ 'remoteApp'์ ๋ชจ๋์ ๊ฐ์ ธ์ค๋ฉด ํด๋น ๊ฐ์ ธ์ค๊ธฐ ๋ฌธ์ด ์คํ๋ ๋๋ง ๋ก๋๋ฉ๋๋ค.
์ง์ฐ ํ๊ฐ ๊ตฌํ
Module Federation์ ์ฌ์ฉํ ์ง์ฐ ํ๊ฐ๋ฅผ ๊ตฌํํ๋ ค๋ฉด ์ ์คํ ๊ณํ๊ณผ ์คํ์ด ํ์ํฉ๋๋ค. ์ฃผ์ ๋จ๊ณ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
1. ๊ตฌ์ฑ
ํธ์คํธ ๋ฐ ์๊ฒฉ ์ ํ๋ฆฌ์ผ์ด์ ์ `webpack.config.js` ํ์ผ ๋ชจ๋์์ `ModuleFederationPlugin`์ ๊ตฌ์ฑํฉ๋๋ค. ํธ์คํธ ์ ํ๋ฆฌ์ผ์ด์ ์ `remotes` ์ต์ ์ ์๊ฒฉ ๋ชจ๋์ ์์น๋ฅผ ์ง์ ํฉ๋๋ค. ์๊ฒฉ ์ ํ๋ฆฌ์ผ์ด์ ์ `exposes` ์ต์ ์ ์๋น์ ์ฌ์ฉํ ์ ์๋ ๋ชจ๋์ ์ง์ ํฉ๋๋ค. `shared` ์ต์ ์ ๊ณต์ ์ข ์์ฑ์ ์ ์ํฉ๋๋ค.
// Remote Application's webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
// ... other webpack configurations
plugins: [
new ModuleFederationPlugin({
name: 'remoteApp',
filename: 'remoteEntry.js',
exposes: {
'./MyComponent': './src/MyComponent',
},
shared: {
react: { singleton: true, requiredVersion: '^18.0.0' },
'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
},
}),
],
};
2. ๋์ ๊ฐ์ ธ์ค๊ธฐ
ํ์ํ ๊ฒฝ์ฐ์๋ง ์๊ฒฉ ๋ชจ๋์ ๋ก๋ํ๋ ค๋ฉด ๋์ ๊ฐ์ ธ์ค๊ธฐ(import())๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ด๊ฒ์ Module Federation ๋ด์์ ์ง์ฐ ๋ก๋ฉ์ ํต์ฌ ๋ฉ์ปค๋์ฆ์
๋๋ค. ๊ฐ์ ธ์ค๊ธฐ ๊ฒฝ๋ก๋ ์๊ฒฉ ์ ํ๋ฆฌ์ผ์ด์
์ ์ด๋ฆ๊ณผ ๋
ธ์ถ๋ ๋ชจ๋ ๊ฒฝ๋ก๋ฅผ ๋ฐ๋ผ์ผ ํฉ๋๋ค.
import React, { useState, useEffect } from 'react';
function HostComponent() {
const [MyComponent, setMyComponent] = useState(null);
useEffect(() => {
// Lazy load the remote component when the component mounts
import('remoteApp/MyComponent')
.then((module) => {
setMyComponent(module.default);
})
.catch((err) => {
console.error('Failed to load remote module:', err);
});
}, []);
return (
{MyComponent ? : 'Loading...'}
);
}
export default HostComponent;
3. ์ค๋ฅ ์ฒ๋ฆฌ
์๊ฒฉ ๋ชจ๋์ ๋ก๋ํ์ง ๋ชปํ๋ ์๋๋ฆฌ์ค๋ฅผ ์ ์์ ์ผ๋ก ์ฒ๋ฆฌํ๋ ค๋ฉด ๊ฐ๋ ฅํ ์ค๋ฅ ์ฒ๋ฆฌ๋ฅผ ๊ตฌํํฉ๋๋ค. ์ฌ๊ธฐ์๋ ๋์ ๊ฐ์ ธ์ค๊ธฐ ์ค ์ ์ฌ์ ์ธ ์ค๋ฅ๋ฅผ ํฌ์ฐฉํ๊ณ ์ฌ์ฉ์์๊ฒ ์ ๋ณด์ฑ ๋ฉ์์ง๋ฅผ ์ ๊ณตํ๋ ๊ฒ(๊ฐ๋ฅํ ๊ฒฝ์ฐ ํด๋ฐฑ ๋ฉ์ปค๋์ฆ ํฌํจ)์ด ํฌํจ๋์ด์ผ ํฉ๋๋ค. ์ด๋ ํนํ ๋คํธ์ํฌ ๋ฌธ์ ๋๋ ์๊ฒฉ ์ ํ๋ฆฌ์ผ์ด์ ์ค๋จ ์ ๋์ฑ ํ๋ ฅ์ ์ด๊ณ ์ฌ์ฉ์ ์นํ์ ์ธ ์ ํ๋ฆฌ์ผ์ด์ ํ๊ฒฝ์ ๋ณด์ฅํฉ๋๋ค.
import React, { useState, useEffect } from 'react';
function HostComponent() {
const [MyComponent, setMyComponent] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
import('remoteApp/MyComponent')
.then((module) => {
setMyComponent(module.default);
})
.catch((err) => {
console.error('Failed to load remote module:', err);
setError('Failed to load component. Please try again.');
});
}, []);
if (error) {
return Error: {error};
}
return (
{MyComponent ? : 'Loading...'}
);
}
export default HostComponent;
4. ์ฝ๋ ๋ถํ
์ฑ๋ฅ์ ๋์ฑ ์ต์ ํํ๋ ค๋ฉด ์ง์ฐ ํ๊ฐ์ ์ฝ๋ ๋ถํ ์ ๊ฒฐํฉํฉ๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ ์์ ์ฒญํฌ๋ก ๋ถํ ํ๊ณ ํด๋น ์ฒญํฌ๋ฅผ ์ง์ฐ ๋ก๋ฉํ๋ฉด ์ด๊ธฐ ๋ก๋ฉ ์๊ฐ์ ํฌ๊ฒ ์ค์ผ ์ ์์ต๋๋ค.
5. ๊ณต์ ์ข ์์ฑ
์ถฉ๋์ ๋ฐฉ์งํ๊ณ ๋ชจ๋ ๊ฐ์ ์ผ๊ด๋ ๋์์ ๋ณด์ฅํ๋ ค๋ฉด ๊ณต์ ์ข ์์ฑ(์: React, ReactDOM, ๊ธฐํ ์ ํธ๋ฆฌํฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ)์ ์ ์คํ๊ฒ ๊ด๋ฆฌํฉ๋๋ค. `ModuleFederationPlugin`์์ `shared` ์ต์ ์ ์ฌ์ฉํ์ฌ ๊ณต์ ์ข ์์ฑ ๋ฐ ํด๋น ๋ฒ์ ์๊ตฌ ์ฌํญ์ ์ง์ ํฉ๋๋ค.
6. ๋ชจ๋ํฐ๋ง ๋ฐ ์ฑ๋ฅ ํ ์คํธ
์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ, ํนํ ์ด๊ธฐ ๋ก๋ฉ ์๊ฐ์ ์ ๊ธฐ์ ์ผ๋ก ๋ชจ๋ํฐ๋งํ๊ณ ๋ณ๋ชฉ ํ์๊ณผ ์ต์ ํ ์์ญ์ ์๋ณํ๊ธฐ ์ํด ์ฑ๋ฅ ํ ์คํธ๋ฅผ ์ํํฉ๋๋ค. Webpack Bundle Analyzer์ ๊ฐ์ ๋๊ตฌ๋ ๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ์๊ฐํํ๊ณ ๊ฐ์ ์์ญ์ ์๋ณํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค. ํ๋ก๋์ ์์ ์ฃผ์ ์งํ๋ฅผ ์ถ์ ํ๊ธฐ ์ํด ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง ๋๊ตฌ๋ฅผ ๊ตฌํํฉ๋๋ค.
๊ณ ๊ธ ์ง์ฐ ํ๊ฐ ๊ธฐ์
๊ธฐ๋ณธ ๊ตฌํ ์ธ์๋ Module Federation ๋ด์์ ์ง์ฐ ํ๊ฐ๋ฅผ ์ธ๋ถํํ๊ณ ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ์ ๋์ฑ ํฅ์์ํค๊ธฐ ์ํด ์ฌ๋ฌ ๊ณ ๊ธ ๊ธฐ์ ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ด๋ฌํ ๊ธฐ์ ์ ์ถ๊ฐ ์ ์ด ๋ฐ ์ต์ ํ ๊ธฐํ๋ฅผ ์ ๊ณตํฉ๋๋ค.
1. ์ฌ์ ๋ก๋ ๋ฐ ์ฌ์ ๊ฐ์ ธ์ค๊ธฐ
์๊ฒฉ ๋ชจ๋์ ์ฌ์ ์ ๋ก๋ํ์ฌ ์ธ์๋ ๋ก๋ฉ ์๊ฐ์ ์ค์ด๊ธฐ ์ํด ์ฌ์ ๋ก๋ ๋ฐ ์ฌ์ ๊ฐ์ ธ์ค๊ธฐ ์ ๋ต์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ฌ์ ๋ก๋ฉ์ ๋ธ๋ผ์ฐ์ ์ ์ต๋ํ ๋นจ๋ฆฌ ๋ชจ๋์ ๋ก๋ํ๋๋ก ์ง์ํ๋ ๋ฐ๋ฉด, ์ฌ์ ๊ฐ์ ธ์ค๊ธฐ๋ ์ ํด ์๊ฐ ๋์ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋ชจ๋์ ๋ก๋ํ๋๋ก ํํธ๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด๋ ์ด๊ธฐ ํ์ด์ง ๋ก๋ ์งํ์ ํ์ํ ๊ฐ๋ฅ์ฑ์ด ๋์ ๋ชจ๋์ ํนํ ์ ์ฉํ ์ ์์ต๋๋ค.
๋ชจ๋์ ์ฌ์ ๋ก๋ํ๋ ค๋ฉด HTML์ `head`์ `rel="modulepreload"` ํน์ฑ์ด ์๋ ๋งํฌ ํ๊ทธ๋ฅผ ์ถ๊ฐํ๊ฑฐ๋ ๋์ ๊ฐ์ ธ์ค๊ธฐ์์ webpack์ `preload` ๋ฐ `prefetch` ๋งค์ง ์ฃผ์์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
// Preload a remote module
import(/* webpackPreload: true */ 'remoteApp/MyComponent')
.then((module) => {
// ...
});
์ฌ์ ๋ก๋ ๋ฐ ์ฌ์ ๊ฐ์ ธ์ค๊ธฐ ์ ๋ต์ ์ฌ์ฉํ๋ ค๋ฉด ๋ถ์ ์ ํ๊ฒ ์ฌ์ฉํ๋ฉด ๋์ญํญ์ด ๋ญ๋น๋๊ณ ๋ถํ์ํ ๋ชจ๋์ด ๋ก๋๋ ์ ์์ผ๋ฏ๋ก ์ฃผ์ํด์ ๊ณ ๋ คํด์ผ ํฉ๋๋ค. ์ฌ์ฉ์ ๋์์ ์ ์คํ๊ฒ ๋ถ์ํ๊ณ ๊ฐ์ฅ ํ์ํ ๊ฐ๋ฅ์ฑ์ด ๋์ ๋ชจ๋์ ๋ก๋ฉ ์ฐ์ ์์๋ฅผ ์ง์ ํฉ๋๋ค.
2. Module Federation ๋งค๋ํ์คํธ ์ต์ ํ
๋ชจ๋ ๋งค๋ํ์คํธ๊ฐ ํฌํจ๋ `remoteEntry.js` ํ์ผ์ ์ต์ ํํ์ฌ ํฌ๊ธฐ๋ฅผ ์ค์ด๊ณ ๋ก๋ฉ ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์์ต๋๋ค. ์ฌ๊ธฐ์๋ ์ถ์, ์์ถ ๋ฐ ์ ์ฌ์ ์ผ๋ก CDN์ ์ฌ์ฉํ์ฌ ํ์ผ์ ์ ๊ณตํ๋ ๊ธฐ์ ์ด ํฌํจ๋ ์ ์์ต๋๋ค. ๋ถํ์ํ ์ฌ๋ก๋ฉ์ ๋ฐฉ์งํ๋ ค๋ฉด ๋งค๋ํ์คํธ๊ฐ ๋ธ๋ผ์ฐ์ ์ ์ํด ์ฌ๋ฐ๋ฅด๊ฒ ์บ์๋์๋์ง ํ์ธํฉ๋๋ค.
3. ์๊ฒฉ ์ ํ๋ฆฌ์ผ์ด์ ์ํ ํ์ธ
๋ชจ๋์ ๋ก๋ํ๊ธฐ ์ ์ ์๊ฒฉ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ์ฉ์ฑ์ ํ์ธํ๊ธฐ ์ํด ํธ์คํธ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ํ ํ์ธ์ ๊ตฌํํฉ๋๋ค. ์ด ์ฌ์ ์๋ฐฉ์ ์ ๊ทผ ๋ฐฉ์์ ์ค๋ฅ๋ฅผ ๋ฐฉ์งํ๊ณ ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค. ์๊ฒฉ ๋ชจ๋์ ๋ก๋ํ์ง ๋ชปํ๋ ๊ฒฝ์ฐ ์ง์ ๋ฐฑ์คํ๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ์๋ ๋ ผ๋ฆฌ๋ฅผ ํฌํจํ ์๋ ์์ต๋๋ค.
4. ์ข ์์ฑ ๋ฒ์ ๊ด๋ฆฌ
์ถฉ๋์ ๋ฐฉ์งํ๊ณ ํธํ์ฑ์ ๋ณด์ฅํ๊ธฐ ์ํด ๊ณต์ ์ข ์์ฑ์ ๋ฒ์ ๊ด๋ฆฌ๋ฅผ ์ ์คํ๊ฒ ์ํํฉ๋๋ค. `ModuleFederationPlugin`์ `shared` ๊ตฌ์ฑ์์ `requiredVersion` ์์ฑ์ ์ฌ์ฉํ์ฌ ๊ณต์ ์ข ์์ฑ์ ํ์ฉ ๊ฐ๋ฅํ ๋ฒ์ ๋ฒ์๋ฅผ ์ง์ ํฉ๋๋ค. ์ข ์์ฑ์ ํจ๊ณผ์ ์ผ๋ก ๊ด๋ฆฌํ๊ณ ๋ค์ํ ๋ฒ์ ์์ ์ฒ ์ ํ๊ฒ ํ ์คํธํ๋ ค๋ฉด ์๋งจํฑ ๋ฒ์ ๊ด๋ฆฌ๋ฅผ ํ์ฉํฉ๋๋ค.
5. ์ฒญํฌ ๊ทธ๋ฃน ์ต์ ํ
์ฌ๋ฌ ์๊ฒฉ ๋ชจ๋์ด ๊ณตํต ์ข ์์ฑ์ ๊ณต์ ํ๋ ๊ฒฝ์ฐ ํนํ ๋ชจ๋ ๋ก๋ฉ์ ํจ์จ์ฑ์ ํฅ์์ํค๊ธฐ ์ํด Webpack์ ์ฒญํฌ ๊ทธ๋ฃน ์ต์ ํ ๊ธฐ์ ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. `splitChunks`๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ๋ฌ ๋ชจ๋ ๊ฐ์ ์ข ์์ฑ์ ๊ณต์ ํ๋ ๊ฒ์ ๊ณ ๋ คํด ๋ณด์ญ์์ค.
Module Federation์์ ์ง์ฐ ํ๊ฐ์ ์ค์ ์ ์ฉ ์ฌ๋ก
Module Federation์ ์ง์ฐ ํ๊ฐ๋ ๋ค์ํ ์ฐ์ ๋ฐ ์ฌ์ฉ ์ฌ๋ก์์ ์๋ง์ ์ค์ ์ ์ฉ ์ฌ๋ก๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค. ๋ช ๊ฐ์ง ์๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
1. ์ ์ ์๊ฑฐ๋ ํ๋ซํผ
๋๊ท๋ชจ ์ ์ ์๊ฑฐ๋ ์น์ฌ์ดํธ๋ ์ ํ ์ธ๋ถ ์ ๋ณด ํ์ด์ง, ๊ฒฐ์ ํ๋ฆ ๋ฐ ์ฌ์ฉ์ ๊ณ์ ์น์ ์ ์ง์ฐ ๋ก๋ฉ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ฌ์ฉ์๊ฐ ํด๋น ์น์ ์ผ๋ก ์ด๋ํ ๋๋ง ์ด๋ฌํ ์น์ ์ ๋ํ ์ฝ๋๋ฅผ ๋ก๋ํ๋ฉด ์ด๊ธฐ ํ์ด์ง ๋ก๋ฉ ์๊ฐ๊ณผ ์๋ต์ฑ์ด ํฅ์๋ฉ๋๋ค.
์ฌ์ฉ์๊ฐ ์ ํ ๋ชฉ๋ก ํ์ด์ง๋ฅผ ํ์ํ๋ค๊ณ ์์ํด ๋ณด์ญ์์ค. ์ง์ฐ ๋ก๋ฉ์ ์ฌ์ฉํ๋ฉด ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ์ฉ์๊ฐ '์ฅ๋ฐ๊ตฌ๋์ ์ถ๊ฐ' ๋ฒํผ์ ํด๋ฆญํ ๋๊น์ง ๊ฒฐ์ ํ๋ฆ๊ณผ ๊ด๋ จ๋ ์ฝ๋๋ฅผ ๋ก๋ํ์ง ์์ ์ด๊ธฐ ํ์ด์ง ๋ก๋ฉ์ ์ต์ ํํฉ๋๋ค.
2. ์ํฐํ๋ผ์ด์ฆ ์ ํ๋ฆฌ์ผ์ด์
์ํฐํ๋ผ์ด์ฆ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ข ์ข ๋์๋ณด๋, ๋ณด๊ณ ๋๊ตฌ ๋ฐ ๊ด๋ฆฌ ์ธํฐํ์ด์ค์ ๊ฐ์ ๊ด๋ฒ์ํ ๊ธฐ๋ฅ์ ๊ฐ์ต๋๋ค. ์ง์ฐ ํ๊ฐ๋ฅผ ์ฌ์ฉํ๋ฉด ํน์ ์ฌ์ฉ์ ์ญํ ๋๋ ์์ ์ ํ์ํ ์ฝ๋๋ง ๋ก๋ํ์ฌ ๊ด๋ จ ๊ธฐ๋ฅ์ ๋ํ ๋ ๋น ๋ฅธ ์ก์ธ์ค์ ํฅ์๋ ๋ณด์์ ์ป์ ์ ์์ต๋๋ค.
์๋ฅผ ๋ค์ด, ๊ธ์ต ๊ธฐ๊ด์ ๋ด๋ถ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ปดํ๋ผ์ด์ธ์ค ๋ชจ๋๊ณผ ๊ด๋ จ๋ ์ฝ๋๋ ์ปดํ๋ผ์ด์ธ์ค ์ก์ธ์ค ๊ถํ์ด ์๋ ์ฌ์ฉ์๊ฐ ๋ก๊ทธ์ธํ ๋๋ง ๋ก๋๋์ด ๋๋ค์ ์ฌ์ฉ์์ ์ฑ๋ฅ์ด ์ต์ ํ๋ ์ ์์ต๋๋ค.
3. ์ฝํ ์ธ ๊ด๋ฆฌ ์์คํ (CMS)
CMS ํ๋ซํผ์ ํ๋ฌ๊ทธ์ธ, ํ ๋ง ๋ฐ ์ฝํ ์ธ ๊ตฌ์ฑ ์์๋ฅผ ์ง์ฐ ๋ก๋ฉํจ์ผ๋ก์จ ์ด์ ์ ์ป์ ์ ์์ต๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ๋น ๋ฅด๊ณ ๋ฐ์์ฑ์ด ๋ฐ์ด๋ ํธ์ง๊ธฐ ์ธํฐํ์ด์ค๋ฅผ ๋ณด์ฅํ๊ณ CMS์ ๊ธฐ๋ฅ์ ํ์ฅํ๋ ๋ชจ๋์ ์ ๊ทผ ๋ฐฉ์์ ํ์ฉํฉ๋๋ค.
๊ธ๋ก๋ฒ ๋ด์ค ๊ธฐ๊ด์์ ์ฌ์ฉํ๋ CMS๋ฅผ ๊ณ ๋ คํด ๋ณด์ญ์์ค. ๊ธฐ์ฌ ์ ํ(์: ๋ด์ค, ์๊ฒฌ, ์คํฌ์ธ )์ ๋ฐ๋ผ ๋ค๋ฅธ ๋ชจ๋์ด ๋ก๋๋์ด ๊ฐ ์ ํ์ ๋ํ ํธ์ง๊ธฐ ์ธํฐํ์ด์ค๋ฅผ ์ต์ ํํ ์ ์์ต๋๋ค.
4. ๋จ์ผ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ (SPA)
SPA๋ ์๋ก ๋ค๋ฅธ ๋ผ์ฐํธ์ ๋ณด๊ธฐ์ ๋ํด ์ง์ฐ ๋ก๋ฉ์ ์ฌ์ฉํ์ฌ ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค. ํ์ฌ ํ์ฑ ๋ผ์ฐํธ์ ๋ํ ์ฝ๋๋ง ๋ก๋ํ๋ฉด ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ฐ์์ฑ์ ์ ์งํ๊ณ ์ํํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
์๋ฅผ ๋ค์ด ์์ ๋ฏธ๋์ด ํ๋ซํผ์ 'ํ๋กํ' ๋ณด๊ธฐ, '๋ด์ค ํผ๋' ๋ณด๊ธฐ ๋ฐ '๋ฉ์์ง' ์น์ ์ ๋ํ ์ฝ๋๋ฅผ ์ง์ฐ ๋ก๋ฉํ ์ ์์ต๋๋ค. ์ด ์ ๋ต์ ์ด๊ธฐ ํ์ด์ง ๋ก๋ฉ ์๋๋ฅผ ๋์ด๊ณ ํนํ ์ฌ์ฉ์๊ฐ ํ๋ซํผ์ ๋ค์ํ ์น์ ๊ฐ์ ํ์ํ ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๋ฐ์ ์ธ ์ฑ๋ฅ์ ํฅ์์ํต๋๋ค.
5. ๋ค์ค ํ ๋ํธ ์ ํ๋ฆฌ์ผ์ด์
์ฌ๋ฌ ํ ๋ํธ๋ฅผ ์ ๊ณตํ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ง์ฐ ๋ก๋ฉ์ ์ฌ์ฉํ์ฌ ๊ฐ ํ ๋ํธ์ ๋ํ ํน์ ๋ชจ๋์ ๋ก๋ํ ์ ์์ต๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ๊ฐ ํ ๋ํธ์ ํ์ํ ์ฝ๋์ ๊ตฌ์ฑ๋ง ๋ก๋ํ์ฌ ์ฑ๋ฅ์ ํฅ์์ํค๊ณ ์ ์ฒด ๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ์ค์ ๋๋ค. ์ด๋ SaaS ์ ํ๋ฆฌ์ผ์ด์ ์์ ํํ ๋ณผ ์ ์์ต๋๋ค.
์ฌ๋ฌ ์กฐ์ง์์ ์ฌ์ฉํ๋๋ก ์ค๊ณ๋ ํ๋ก์ ํธ ๊ด๋ฆฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ์๊ฐํด ๋ณด์ญ์์ค. ๊ฐ ํ ๋ํธ๋ ๊ณ ์ ํ ๊ธฐ๋ฅ, ๋ชจ๋ ๋ฐ ์ฌ์ฉ์ ์ง์ ๋ธ๋๋ฉ์ ๊ฐ์ง ์ ์์ต๋๋ค. ์ง์ฐ ๋ก๋ฉ์ ์ฌ์ฉํ๋ฉด ์ ํ๋ฆฌ์ผ์ด์ ์ ํ์ํ ๋ ๊ฐ ํ ๋ํธ์ ํน์ ๊ธฐ๋ฅ ๋ฐ ์ฌ์ฉ์ ์ง์ ์ ๋ํ ์ฝ๋๋ง ๋ก๋ํ์ฌ ์ฑ๋ฅ์ ํฅ์์ํค๊ณ ์ค๋ฒํค๋๋ฅผ ์ค์ ๋๋ค.
๋ชจ๋ฒ ์ฌ๋ก ๋ฐ ๊ณ ๋ ค ์ฌํญ
Module Federation์ ์ฌ์ฉํ ์ง์ฐ ํ๊ฐ๋ ์๋นํ ์ด์ ์ ์ ๊ณตํ์ง๋ง ์ต์ ์ ์ฑ๋ฅ๊ณผ ์ ์ง ๊ด๋ฆฌ๋ฅผ ๋ณด์ฅํ๋ ค๋ฉด ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด๋ ๊ฒ์ด ํ์์ ์ ๋๋ค.
1. ์ ์คํ ๊ณํ ๋ฐ ์ํคํ ์ฒ
์ ํ๋ฆฌ์ผ์ด์ ์ํคํ ์ฒ๋ฅผ ์ ์คํ๊ฒ ์ค๊ณํ์ฌ ์จ๋๋งจ๋๋ก ๋ก๋ํด์ผ ํ๋ ๋ชจ๋๊ณผ ๋ฏธ๋ฆฌ ๋ก๋ํด์ผ ํ๋ ๋ชจ๋์ ๊ฒฐ์ ํฉ๋๋ค. ์ฌ์ฉ์ ์ผ๋ฐ์ ์ธ ์ํฌํ๋ก์ ์ค์ํ ๊ฒฝ๋ก๋ฅผ ๊ณ ๋ คํ์ฌ ๊ฐ๋ฅํ ์ต์์ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ณด์ฅํฉ๋๋ค.
2. ๋ชจ๋ํฐ๋ง ๋ฐ ์ฑ๋ฅ ํ ์คํธ
์ ์ฌ์ ์ธ ๋ณ๋ชฉ ํ์๊ณผ ๊ฐ์ ์์ญ์ ์๋ณํ๊ธฐ ์ํด ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ์ ์ง์์ ์ผ๋ก ๋ชจ๋ํฐ๋งํฉ๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ก๋ ์์๋ ์๋ต์ฑ์ ์ ์งํ๊ณ ์ฑ๋ฅ์ด ์ฐ์ํ์ง ํ์ธํ๊ธฐ ์ํด ์ ๊ธฐ์ ์ธ ์ฑ๋ฅ ํ ์คํธ๋ฅผ ์ํํฉ๋๋ค.
3. ์ข ์์ฑ ๊ด๋ฆฌ
๋ฒ์ ์ถฉ๋์ ๋ฐฉ์งํ๊ณ ๋ชจ๋ ๊ฐ์ ํธํ์ฑ์ ๋ณด์ฅํ๊ธฐ ์ํด ๊ณต์ ์ข ์์ฑ์ ๊ผผ๊ผผํ๊ฒ ๊ด๋ฆฌํฉ๋๋ค. npm ๋๋ yarn๊ณผ ๊ฐ์ ํจํค์ง ๊ด๋ฆฌ์๋ฅผ ์ฌ์ฉํ์ฌ ์ข ์์ฑ์ ๊ด๋ฆฌํฉ๋๋ค.
4. ๋ฒ์ ๊ด๋ฆฌ ๋ฐ CI/CD
๊ฐ๋ ฅํ ๋ฒ์ ๊ด๋ฆฌ ๋ฐฉ์์ ์ฌ์ฉํ๊ณ ๋ชจ๋์ ๋น๋, ํ ์คํธ ๋ฐ ๋ฐฐํฌ๋ฅผ ์๋ํํ๊ธฐ ์ํด ์ง์์ ํตํฉ ๋ฐ ์ง์์ ๋ฐฐํฌ(CI/CD) ํ์ดํ๋ผ์ธ์ ๊ตฌํํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ฌ๋์ ์ค๋ฅ ์ํ์ ์ค์ด๊ณ ์ ๋ฐ์ดํธ์ ๋น ๋ฅธ ๋ฐฐํฌ๋ฅผ ์ด์งํ ์ ์์ต๋๋ค.
5. ์ปค๋ฎค๋์ผ์ด์ ๋ฐ ํ์
์๋ก ๋ค๋ฅธ ๋ชจ๋์ ๋ด๋นํ๋ ํ ๊ฐ์ ๋ช ํํ ์ปค๋ฎค๋์ผ์ด์ ๊ณผ ํ์ ์ ๋ณด์ฅํฉ๋๋ค. API ๋ฐ ๊ณต์ ์ข ์์ฑ์ ๋ช ํํ๊ฒ ๋ฌธ์ํํ์ฌ ์ผ๊ด์ฑ์ ๋ณด์ฅํ๊ณ ์ ์ฌ์ ์ธ ํตํฉ ๋ฌธ์ ๋ฅผ ์ค์ ๋๋ค.
6. ์บ์ฑ ์ ๋ต
๋ก๋๋ ๋ชจ๋์ ์บ์ํ๊ณ ๋คํธ์ํฌ ์์ฒญ ์๋ฅผ ์ต์ํํ๊ธฐ ์ํด ํจ์จ์ ์ธ ์บ์ฑ ์ ๋ต์ ๊ตฌํํฉ๋๋ค. ๋ธ๋ผ์ฐ์ ์บ์ฑ ๋ฐ CDN ์ฌ์ฉ์ ํ์ฉํ์ฌ ์ฝํ ์ธ ์ ์ก์ ์ต์ ํํ๊ณ ๋๊ธฐ ์๊ฐ์ ์ค์ ๋๋ค.
๋๊ตฌ ๋ฐ ๋ฆฌ์์ค
Module Federation ๋ฐ ์ง์ฐ ํ๊ฐ๋ฅผ ๊ตฌํํ๊ณ ๊ด๋ฆฌํ๋ ๋ฐ ๋์์ด ๋๋ ๋ช ๊ฐ์ง ๋๊ตฌ์ ๋ฆฌ์์ค๊ฐ ์์ต๋๋ค.
- Webpack: Module Federation์ ํต์ฌ ๋ฒ๋ค๋ฌ ๋ฐ ๊ธฐ๋ฐ์ ๋๋ค.
- Module Federation ํ๋ฌ๊ทธ์ธ: Module Federation์ ๊ตฌ์ฑํ๊ณ ์ฌ์ฉํ๋ Webpack ํ๋ฌ๊ทธ์ธ์ ๋๋ค.
- Webpack Bundle Analyzer: Webpack ๋ฒ๋ค์ ํฌ๊ธฐ์ ๋ด์ฉ์ ์๊ฐํํ๋ ๋๊ตฌ์ ๋๋ค.
- ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง ๋๊ตฌ(์: New Relic, Datadog): ์ฃผ์ ์ฑ๋ฅ ์งํ๋ฅผ ์ถ์ ํ๊ณ ์ ์ฌ์ ์ธ ๋ณ๋ชฉ ํ์์ ์๋ณํฉ๋๋ค.
- ์ค๋ช ์: Webpack์ ๊ณต์ ์ค๋ช ์ ๋ฐ ๋ค์ํ ์จ๋ผ์ธ ํํ ๋ฆฌ์ผ.
- ์ปค๋ฎค๋ํฐ ํฌ๋ผ ๋ฐ ๋ธ๋ก๊ทธ: ์ปค๋ฎค๋ํฐ์ ์ฐธ์ฌํ์ฌ ์ง์์ ๋ฐ๊ณ ๋ค๋ฅธ ๊ฐ๋ฐ์๋ก๋ถํฐ ๋ฐฐ์ฐ์ญ์์ค.
๊ฒฐ๋ก
JavaScript Module Federation์ ์ฌ์ฉํ ์ง์ฐ ํ๊ฐ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ์ ์ต์ ํํ๊ณ , ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ๋ฉฐ, ๋ ๋ชจ๋์์ผ๋ก ์ ์ง ๊ด๋ฆฌ ๊ฐ๋ฅํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๊ฐ๋ ฅํ ๊ธฐ์ ์ ๋๋ค. ์จ๋๋งจ๋๋ก ๋ชจ๋์ ๋ก๋ํ๋ฉด ์ ํ๋ฆฌ์ผ์ด์ ์ ์ด๊ธฐ ๋ก๋ฉ ์๊ฐ์ ํฌ๊ฒ ์ค์ด๊ณ , ์๋ต์ฑ์ ๊ฐ์ ํ๋ฉฐ, ๋ฆฌ์์ค ์ฌ์ฉ์ ์ต์ ํํ ์ ์์ต๋๋ค. ์ด๋ ์ง๋ฆฌ์ ์ผ๋ก ๋ถ์ฐ๋ ํ์์ ๊ฐ๋ฐํ๊ณ ์ ์ง ๊ด๋ฆฌํ๋ ํฌ๊ณ ๋ณต์กํ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ํนํ ๊ด๋ จ์ด ์์ต๋๋ค. ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ณต์ก์ฑ์ด ์ฆ๊ฐํ๊ณ ๋ ๋น ๋ฅด๊ณ ๋ ๋์ ์ฑ๋ฅ์ ๊ฒฝํ์ ๋ํ ์๊ตฌ๊ฐ ์ฆ๊ฐํจ์ ๋ฐ๋ผ Module Federation ๋ฐ ์ง์ฐ ํ๊ฐ๋ ์ ์ธ๊ณ ๊ฐ๋ฐ์์๊ฒ ์ ์ ๋ ์ค์ํด์ง ๊ฒ์ ๋๋ค.
๊ฐ๋ ์ ์ดํดํ๊ณ , ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด๊ณ , ์ฌ์ฉ ๊ฐ๋ฅํ ๋๊ตฌ ๋ฐ ๋ฆฌ์์ค๋ฅผ ํ์ฉํจ์ผ๋ก์จ ๊ฐ๋ฐ์๋ Module Federation์ ์ฌ์ฉํ ์ง์ฐ ํ๊ฐ์ ๋ชจ๋ ์ ์ฌ๋ ฅ์ ํ์ฉํ๊ณ ์ ์ธ๊ณ ์ฒญ์ค์ ๋์์์ด ์งํํ๋ ์๊ตฌ ์ฌํญ์ ์ถฉ์กฑํ๋ ๊ณ ์ฑ๋ฅ ํ์ฅ ๊ฐ๋ฅํ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์์ต๋๋ค. ์จ๋๋งจ๋ ๋ชจ๋ ๋ก๋ฉ์ ํ์ ๋ฐ์๋ค์ด๊ณ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๊ณ ๋ฐฐํฌํ๋ ๋ฐฉ์์ ๋ฐ๊ฟ๋ณด์ธ์.